<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0px 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 200px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .thisMonth {
    margin: 7px 34px 0 10px;
    font-size: 14px;
    color: #337AB7;
    cursor: pointer;
  }

	.change-abs {
		position: absolute;
		width:46px;
		height:20px;
		background:rgba(240,242,255,1);
		border-radius:12px 2px 12px 2px;
		right: 0;
		top: 10px;
		line-height: 20px;
		color: rgba(109, 122, 226, 1);
		font-size: 12px;
		text-align: center;
	}
  .bill-statistics .item{
  display: flex;
  align-items: center;
  width: 300px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(208,218,226,0.5);
  overflow: visible;
}
.bill-statistics .item .icon{
  clear: both;
  font-size: 14px;
  margin-right: 6px;
  height: auto;
  margin-top:0px;
}
.bill-statistics .item .name{
  clear: both;
}
.bill-statistics .item001{
  background: rgba(109,122,226,0.3);
}
.bill-statistics .item001 i{
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name{
  font-size: 18px;
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(109,122,226,0.6);
}

.bill-statistics .item002{
  background: rgba(92,159,243,0.3);
}
.bill-statistics .item002 i{
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name{
  font-size: 18px;
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(92,159,243,0.6);
}

.bill-statistics .item003{
  background: rgba(255,171,38,0.3);
}
.bill-statistics .item003 i{
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name{
  font-size: 18px;
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(255,171,38,0.6);
}
.bill-statistics .item004{
  background: rgba(145,188,84,0.3);
}
.bill-statistics .item004 i{
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name{
  font-size: 18px;
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(145,188,84,0.6);
}
.bill-statistics .item005{
  background: rgba(243,144,92,0.3);
}
.bill-statistics .item005 i{
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name{
  font-size: 18px;
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(243,144,92,0.6);
}
.bill-statistics .item006{
  background: rgba(254,33,33,0.3);
}
.bill-statistics .item006 i{
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name{
  font-size: 18px;
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(254,33,33,0.6);
}
.znjMore{
  position: absolute;
  right: 15px;
  top: 15px;
}
.item006 ul{
  display: none;
  width: 300px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 0px rgba(209,209,209,0.5);
  position: absolute;
  top: 44px;
  left: 0px;
  z-index: 99999;
}
.item006 ul li{
  line-height: 40px;
  font-size: 14px;
  text-indent: 26px;
}
.item006 ul li span{
  color: #FE2121;
  font-weight: 600;
  margin-left: 20px;
}
.item006:hover ul{
  display: block;
}
</style>
<section id="fsListIndex">
  <hl-page-header title="账单收款">
    <hl-button type="outline" @on-click="batchCallEvent" v-if="permissions.indexOf('c163') > -1 && !showSelflag">批量催缴</hl-button>
    <hl-button type="outline" @on-click="showprintSel" v-if="permissions.indexOf('c162') > -1 && !showSelflag">批量打印</hl-button>
    <hl-button type="outline" @on-click="showallSel" v-if="permissions.indexOf('c163') > -1 && !showSelflag">批量收款</hl-button>
  </hl-page-header>

  <div class="ptb-10 border-b">
    <div class="head-container clearfix">
      <div class="clearfix">
        <div class="mes">
          <p>信息检索</p>
          <div class="global_search">
            <span class="icon-Gm-search"></span>
            <input v-model="khname" autocomplete="off" type="text" class="global_ipt_text" placeholder="客户/合同名称/账单编号/管理编号" @keyup.enter="getData(1)" style="width:240px" />
          </div>
        </div>

        <div class="flow" v-show="isExtenseFlag">
          <p>组合</p>
          <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
        </div>

        <div class="flow">
          <p>付款截止日</p>
          <div class="pull-left">
            <web-calendar v-model="beginDate" tips="起始时间" width="140"></web-calendar>
          </div>
          <span style="width:20px;" class="text-center line-height-34 inline pull-left">-</span>
          <div class="pull-left">
            <web-calendar v-model="endDate" tips="截止时间" width="140"></web-calendar>
          </div>
          <div class="pull-left thisMonth" @click="getThisMonthData">本月账单</div>
        </div>

        <div class="button-group pull-left" v-if="!isExtenseFlag">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="mt-10 clearfix">
        <div class="flow" v-if="isExtenseFlag">
          <p class="color-cfcfcf">项目</p>
          <hl-select :data="projectList" v-model="projectId" :width="140" @on-change="getGroupPrimaryData"></hl-select>
        </div>
        <div class="flow" v-if="isExtenseFlag">
          <p class="color-cfcfcf">楼宇</p>
          <hl-select :data="buildingList" v-model="buildingId" :width="140" @on-change="getbuildingId"></hl-select>
        </div>
        <div class="flow" v-if="isExtenseFlag">
          <p class="color-cfcfcf">楼层</p>
          <hl-select :data="floorList" v-model="floorId" :width="140" @on-change="getfloorId"></hl-select>
        </div>
        <div class="flow" v-if="isExtenseFlag" style="margin-right: 24px;">
          <p class="color-cfcfcf">单元</p>
          <hl-select :data="unitList" v-model="unitId" :width="140" @on-change="getunitId"></hl-select>
        </div>
        <div class="button-group pull-left" v-if="isExtenseFlag">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="global_open_sign" @click="openSearch">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>
    </div>

    <div class="border-b global_screening_container">
      <div class="clearfix" style="width: 50%;">
        <div class="pull-left" style="margin-right: 45px;">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">支付状态</b>
            <hl-checkbox-button style="float:left" :data="billPaymentTypeData" v-model="selectedPaymentTypeCode" @on-click="selectMenuList" merge></hl-checkbox-button>
          </ul>
        </div>
        <div class="pull-left" style="margin-right: 45px;">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">处理状态</b>
            <hl-checkbox-button style="float:left" :data="billOverTypeData" v-model="selectedOverTypeCode" @on-click="selectMenuList" merge></hl-checkbox-button>
          </ul>
        </div>

      </div>
      <div class="clearfix" style="width: 50%;">
        <div class="pull-left">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">减免情况</b>
            <hl-checkbox-button style="float:left" :data="breaksData" v-model="selectedBreaksCode"  @on-click="selectMenuList" merge></hl-checkbox-button>
          </ul>
        </div>
        <div class="pull-left dy-flex" style="align-items: center;">
          <ul>
            <b class="font-14 mr-10" style="lineHeight:54px;float:left;">账单类型</b>
            <hl-checkbox-button style="float:left" :data="billTypeData" v-model="selectedBillTypeCode" @on-click="selectMenuList" merge></hl-checkbox-button>
          </ul>
          <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="bottom:0px;left:334px;"></span>
        </div>
      </div>
    </div>

     <!-- 统计数据 -->
    <div class="ptb-10 dy-flex bill-statistics">
      <div class="item item001">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计应收(元)</span>{{bill.amountReceived | formatNum}}</span>
      </div>
      <div class="item item002">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计减免(元)</span>{{bill.amountDerate | formatNum}}</span>
      </div>
      <div class="item item003">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计结转(元)</span>{{bill.amountCarrayOver | formatNum}}</span>
      </div>
    </div>
    <div class="pb-10 dy-flex bill-statistics">
      <div class="item item004">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计已收(元) </span> {{bill.amountPayed | formatNum}}</span>
      </div>
      <div class="item item005">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"> <span>合计未收(元)</span>  {{bill.amountWpay | formatNum}}</span>
      </div>
      <div class="item item006 relative" v-if="bill.lateFeeCalculateOpenFlag == 'Y'">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"> <span>应收滞纳金(元)</span>  {{bill.lateFeeReceived | formatNum}}</span>
        <i class="icon-predict-more znjMore" style="color:#fff" ></i>
        <ul class="" >
          <li class="border-b color-999">
            减免滞纳金(元)<span>{{bill.lateFeeDerate | formatNum}}</span>
          </li>
          <li class="border-b color-999">
            已收滞纳金(元)<span>{{bill.lateFeePay | formatNum}}</span>
          </li>
          <li class="color-999">
            未收滞纳金(元)<span>{{bill.lateFeeRest | formatNum}}</span>
          </li>
        </ul>
      </div>
    </div>

    <!--流式布局表格-->
    <section class="fixed-config-table-container global_table" style="margin:10px 0;border:1px solid #E5E5E5;" @mouseenter="showScroll" @mouseleave="hideScroll">
      <!-- 内容表格 -->
      <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}" :style="{marginRight: !showSelflag ? '163px' : '0px'}">
        <div :style="tbTitleWidth">
          <div class="config-table-title-wrap dy-flex global_table_title">
            <div class="all-select" style="width: 90px;" v-if="showSelflag">
              <span class="js-set" :class="{'js-q-active': allcheckflag}" style="margin-left: 18px;" @click="selAll" v-if="printpaytype != 'pay'">全选</span>
            </div>
            <div class="config-table-title-item" :class="[getFlexElControl(item.name)]" v-if="item.isShow == 'Y'" v-for="(item,index) in tbTitle" @click=" sort(item,index)">
              <span>{{item.displayName ? item.displayName : item.name}}</span>
              <span class="icon-Gm-sort-default bt-icon" v-if="item.isSort == 'Y' && item.name == '收款时间' "><span class="path1" style="fontSize:18px"></span><i class="path2" style="fontSize:18px"></i></span>
              <span class="icon-Gm-sort-default du-icon" v-if="item.isSort == 'Y' && item.name == '距到期天数' "><span class="path1" style="fontSize:18px"></span><i class="path2" style="fontSize:18px"></i></span>
            </div>
          </div>

          <div class="config-table-content-wrap">
            <ul class="dy-flex global_table_item" v-for="(item,index) in bill.bills">
              <div class="all-select" style="width: 90px;" v-if="showSelflag">
                <span class="js-set" :class="{'js-q-active': item.flag}" style="margin-left: 18px;" @click="sgelection(index)" v-if=" item.contractAlterFlag !== 'Y' "></span>
              </div>
              <li class="relative" :class="[getFlexElControl(item1.name)]" v-if="item1.isShow == 'Y'" v-for="(item1,index1) in tbTitle" :title="( item1.value == 'zlfName' || item1.value == 'contractName' || item1.value == 'projectName' || item1.value == 'billPeriod' )?item[item1.value]:''">
                <span v-if="item1.isShow == 'Y' && item1.value != 'billState' && item1.value != 'paymentState' && item1.value != 'balanceTime' && item1.value != 'overdueDays' ">{{item[item1.value] | formatUndefined}}</span>
                <span v-if=" item1.isShow == 'Y' && item1.value == 'billState' ">{{item[item1.value] | billState}}</span>
                <span v-if=" item1.isShow == 'Y' && item1.value == 'paymentState' ">{{item[item1.value] | billState}}</span>
                <span v-if=" item1.isShow == 'Y' && item1.value == 'balanceTime' ">{{item[item1.value] | formatDate}}</span>
                <span class="color-orange" v-if=" item1.isShow == 'Y' && item1.value == 'overdueDays' ">{{item[item1.value] | overDay}}</span>
								<span class="change-abs" v-if="item1.value == 'zlfName' && item.contractAlterFlag == 'Y'">变更中</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 操作 -->
      <div class="config-table-operate-wrap" style="width:164px;" v-show="!showSelflag">
        <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
          <div class="name">操作</div>
          <div class="extension-wrap">
            <i class="icon-predict-more extension-icon"></i>
          </div>
          <ul class="table-type-wrap" style="left:30px;">
            <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
            <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
            <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
          </ul>
        </div>
        <ul class="button-group">
          <li v-for="(item,index) in bill.bills" class="global_table_item">
            <a target="_blank" :href="'#/billDetail?id='+item.id+'&aid='+item.contractId+'&page=financeList&ddtab=true'" v-show="!showSelflag">查看</a>
            <a target="_blank" v-if="item.paymentState !== 'APE' && item.contractAlterFlag == 'N'" :href="'#/billEdit?id='+item.id+'&aid='+item.contractId + '&page=financeList&ddtab=true' " class="js-jumpTarget-seeacc js-access-control" data-control="c69" v-show="!showSelflag">收款</a>
            <a @click="toCarryOverUrl(item)" v-show="permissions.indexOf('c316') > -1 && item.contractAlterFlag == 'N'">结转</a>
            <a v-if="item.billState == 'WA' && item.contractAlterFlag == 'N'" target="_blank" :href="'#/billExamine?id='+item.id+'&aid='+item.contractId+'&page=billList&ddtab=true'">审核</a>
          </li>
        </ul>
      </div>
    </section>


    <div class="user-page ptb-10 clearfix">
      <div class="pull-left user-page-num">
        <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
        <span>每页<hl-select :data="pages" v-model="pageCount" width="80" @on-change="getDateTime"></hl-select>条</span>
      </div>
      <div class="pull-right">
        <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
      </div>
    </div>
    <div class="mt-15" v-if="showSelflag">
      <hl-button type="primary" @on-click="querypay" v-if="printpaytype == 'pay'">确认收款</hl-button>
      <hl-button type="primary" @on-click="printAll" v-if="printpaytype == 'print'">确认打印</hl-button>
      <hl-button type="primary" @on-click="showBatchCall" v-if="printpaytype == 'batchCall'">确认催缴</hl-button>
      <hl-button type="outline" @on-click="showSelflag = !showSelflag">取消</hl-button>
    </div>

    <hl-dialog title="批量催缴" :visible="batchCallFlag" @on-close="closeBatchCall">
      <div class="text-center line-height-34" style="padding: 50px 0;" v-if="!isResultsflag">
        <div class="icon-Nav-dispose-complete" style="font-size: 26px;color: rgba(68,181,72,1);"></div>
        <div>催缴完成</div>
        <span>本次总共发送<a>{{results.sendTotalNum}}</a>条，成功<a>{{results.sendSuccessNum}}</a>条</span>
        <span v-if="results.sendTotalNum != results.sendSuccessNum">，失败<a>{{results.sendFailedNum}}</a>条 <a @click="checkDetail">查看详情</a></span>
      </div>
      <div v-if="isResultsflag">
        <span>本次总共发送<a>{{results.sendTotalNum}}</a>条，成功<a>{{results.sendSuccessNum}}</a>条，失败<a>{{results.sendFailedNum}}</a>条</span>
        <div class="br-4 box-i-shadow bg-fff text-center line-height-40 mt-5">
          <div class="dy-flex color-gray">
            <div class="dy-fx-1">序</div>
            <div class="dy-fx-3">客户</div>
            <div class="dy-fx-3">合同名称</div>
            <div class="dy-fx-3">项目名</div>
            <div class="dy-fx-3">失败原因</div>
          </div>
          <div class="dy-flex border-t" v-for="(item,index) in failureList">
            <div class="dy-fx-1">{{index+1}}</div>
            <div class="dy-fx-3 ellipsis-1" :title="item.resultDetail.customer_name">{{item.resultDetail.customer_name || '--'}}</div>
            <div class="dy-fx-3 ellipsis-1" :title="item.resultDetail.contract_name">{{item.resultDetail.contract_name || '--'}}</div>
            <div class="dy-fx-3 ellipsis-1" :title="item.resultDetail.project_name">{{item.resultDetail.project_name || '--'}}</div>
            <div class="dy-fx-3 ellipsis-1" :title="item.resultDetail.failure_reasons[0]">{{item.resultDetail.failure_reasons[0] || '--'}}</div>
          </div>
        </div>
      </div>
    </hl-dialog>


    <!-- 自定义列表项弹出层 -->
    <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
      <div class="head-pop font-16"><span>自定义列</span>
        <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
      </div>
      <div class="content-pop">
        <div class="content text-center">
          <ul class="title-wrap">
            <li class="dy-fx-1">名称</li>
            <li class="dy-fx-2">自定义名称</li>
            <li class="dy-fx-1">状态</li>
          </ul>
          <div class="ctx-wrap" id="sortableTable">
            <ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle" @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
              <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
              <li class="dy-fx-1 name">{{item.name}}</li>
              <li class="dy-fx-2">
                <input type="text" class="form-control" v-model="item.displayName">
              </li>
              <li class="dy-fx-1 ">
                <span class="show-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'Y' , 'icon-uncheck':item.isShow == 'N' }" @click="selectedTitleItem(item,index)">显示</span>
                <span class="hide-icon " :class="{'icon-Nav-contract-choice':item.isShow == 'N' , 'icon-uncheck':item.isShow == 'Y' }" @click="cancelSelectedTitleItem(item,index)">隐藏</span>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="fw-button">
        <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
        <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
      </div>
    </div>
    <div class="backdrop" v-if="isShowTableLayer"></div>
    <!-- 批量收款弹窗 -->
    <div class="pay-mark" v-if="payflag">
      <div class="pay-pop">
        <div class="title">确认收款</div>
        <div class="close" @click="cancelPay">x</div>
        <div class="pay-container">
          <div class="dy-flex line-height-34">
            <div class="dy-fx-1">收款总额：</div>
            <div class="dy-fx-2">{{totalAmount | formatNum}}元</div>
          </div>
          <div class="dy-flex line-height-34 mt-5">
            <div class="dy-fx-1">支付方式：</div>
            <div class="dy-fx-2">
              <div class="select-ul">
                <span class="select-name br-4 box-i-shadow">请选择</span>
                <ul>
                  <li @click="setPayType(item.dictCode)" v-for="item in payType">{{item.dictName}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="dy-flex line-height-34 mt-5">
            <div class="dy-fx-1">支付时间：</div>
            <div class="dy-fx-2">
              <web-calendar v-model="dateModel" tips="请选择时间"></web-calendar>
            </div>
          </div>
        </div>
        <div class="pay-button">
          <button class="n-btn-primary br-4 mr-10" @click="clickPay">确认</button>
          <button class="n-btn-outline br-4" @click="cancelPay">取消</button>
        </div>
      </div>
    </div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/bill/scripts/finance_list.js" charset="utf-8"></script>

<style media="screen">
  .batch-call-content {
    width: 480px;
    background: #fff;
  }

  .batch-call-content .close {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }

  .batch-call-text {
    padding-bottom: 25px;
  }


  .pay-mark,
  .batch-call-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pay-pop {
    width: 420px;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
  }

  .pay-pop .title {
    height: 45px;
    line-height: 45px;
    text-align: center;
  }

  .pay-pop .close {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 21px;
  }

  .pay-container {
    background-color: #f9f9f9;
    padding: 20px 80px;
  }

  .pay-button {
    text-align: center;
    padding: 10px 0;
  }
</style>
